<template>
    <el-form :model="form">
        <el-row
            type="flex"
            justify="space-between"
            align="middle"
        >
            <el-col>
                <el-form-item>
                    <el-autocomplete
                        class="inline-input"
                        :fetch-suggestions="searchCity"
                        placeholder="切换城市"
                        :trigger-on-focus="false"
                        @select="changeCity"
                        v-model="form.cityName"
                    ></el-autocomplete>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-input
                        v-popover:popover
                        suffix-icon="el-icon-user"
                        placeholder="人数未定"
                        v-model="form.person"
                    ></el-input>
                    <el-popover
                        ref="popover"
                        placement="bottom-start"
                        visible-arrow
                        width="300"
                        trigger="focus"
                        v-model="selectVisiable"
                    >
                        <div class="person_choose">
                            <div class="person_choose_row1">
                                <div class="person_choose_row1_item">每间</div>
                                <div
                                    class="person_choose_row1_item"
                                    v-for="(v,i) of selectOptions"
                                    :key="v.id || i"
                                >
                                    <el-select
                                        placeholder="请选择"
                                        size="mini"
                                        v-model="selectPerson[i]"
                                        @change="selectPerson[i]=`${$event} ${v.type}`"
                                    >

                                        <el-option
                                            v-for="(item,index) of v.list"
                                            :key="index"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>

                            </div>
                            <div class="person_choose_line"></div>
                            <div class="person_choose_row2">
                                <el-button
                                    type="primary"
                                    size="mini"
                                    @click="confirmPerson"
                                    slot="reference"
                                >确定</el-button>
                            </div>
                        </div>
                    </el-popover>
                </el-form-item>
            </el-col>
            <el-col>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="searchHotel"
                    >查看价格</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>

export default {
    components: {},
    props: {},
    data() {
        const { cityName, enterTime, leftTime } = this.$route.query;
        const time = enterTime ? [enterTime, leftTime] : [];
        return {
            // 表单数据
            form: {
                cityName, //城市名称
                time,//时间信息
                person: '', //人数
            },
            //日期选择器配置项
            pickerOptions: {
                disabledDate(time) {
                    //禁用今天之前
                    return time.getTime() + 24 * 60 * 60 * 1000 < Date.now();
                }
            },

            //下拉选择配置
            selectVisiable: false,//控制下拉框显隐
            selectPerson: ['1 成人', '0 儿童'],//选择人员
            selectOptions: [
                {
                    type: '成人',
                    list: Array(7).fill().map((v, i) => ({ value: i + 1 }))
                },
                {
                    type: '儿童',
                    list: Array(5).fill().map((v, i) => ({ value: i }))
                }
            ]
        };
    },
    methods: {
        async searchCity(qeuryString, cb) {
            //发送查询请求
            const res = await this.$axios.get('/cities', { params: { name: qeuryString } });
            //映射出结果数组
            const result = res.data.data.map(v => ({ ...v, value: v.name }));
            cb(result); //给出结果
        },

        //城市切换
        changeCity() {
            this.$emit('updateQueryString', { cityName: this.form.cityName });//发射事件，更新查询字符串参数
        },

        //人数确认
        confirmPerson() {
            this.form.person = this.selectPerson.join(' '); //赋值
            this.selectVisiable = false;//隐藏 
        },

        //搜索酒店
        searchHotel() {
            const { cityName, time: [enterTime, leftTime] } = this.form;
            this.$emit('updateQueryString', { cityName, enterTime, leftTime });//发射事件，更新查询字符串参数
        }
    },
}
</script>

<style lang="less" scoped>
.el-form-item {
    margin-right: 15px;
}

.person_choose {
    .person_choose_row1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .person_choose_row1_item {
            flex: 1;
            margin-right: 10px;
        }
    }
    .person_choose_line {
        width: 100%;
        height: 1px;
        margin: 20px 0;
        background: #ccc;
    }
    .person_choose_row2 {
        display: flex;
        justify-content: flex-end;
    }
}
</style>